<template>
	<view class="xilu">
		<view class="container">
			<view class="pr">
				<swiper class="xilu_swiper_info" @change="swiperTab" :current="current" :circular="true"
					:autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(vo,index) in thumb_images">
						<image :src="vo" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="xilu_swiper_dot">{{ current + 1 }}/{{ thumb_images.length || 0}}</view>
				<image v-if="web_url" :src="web_url+'/uniapp_image/xilu_mask.png'" mode="aspectFill" class="xilu_mask">
				</image>
			</view>
			<view class="pr z5 plr25 pb30">
				<view class="xilu_box">
					<view class="flex-box bb pb20">
						<view class="flex-grow-1">
							<view class="flex-box">
								<view class="avatar ml20">
								<image :src="info.xilufitness_urls.coach_avatar" mode="widthFix"
									class="xilu_avatar ">
								</image>
								</view>
								<view>
									<div class="flex-box ml20">
										<view class="fs44 fw500 col3 lh62 mr20">{{info.coach_name || ''}}</view>
										<view class="fs44 fw500 col3 lh62 mr20">{{info.coach_age || ''}}</view>
										<view class="fs44 fw500 col3 lh62 mr20">
											{{info.coach_sex == 'male' ? '男' :  info.coach_sex == 'female'  ? '女' : '' || ''}}
										</view>
									</div>

									<view class="xilu_tips fs44 fw500 col3 lh62">{{info.group_name || ''}}</view>
								</view>


							</view>
							<view class="mt30 fs30 col3 lh42" v-if="lable_list.length > 0">{{lable_list.join('｜')}}
							</view>
						</view>
						<view class="tc" @tap="collect(info.id,info.shop.id)">
							<image :src="'../../static/images/xilu_fav_'+(info.is_collect == 1 ? 's' : 'u')+'c.png'"
								mode="aspectFill" class="ico60"></image>
							<view class="fs28 col9 lh40 mt10">收藏</view>
						</view>
					</view>
					<view class="mt20 fs30 col9 lh42">
						{{info.coach_info || ''}}
					</view>
				</view>

				<view class="pr z2 mt30" v-if="info.shop" @tap="openLocation(info.shop.lat,info.shop.lng)">
					<image v-if="web_url" :src="web_url + '/uniapp_image/xilu_bg_info.png'" mode="aspectFill"
						class="xilu_bg_info"></image>
					<view class="xilu_bg_view flex-box plr30">
						<image src="@/static/images/xilu_icon_address_gray.png" mode="aspectFill" class="ico28">
						</image>
						<view class="flex-grow-1">
							<view class="w460 m-ellipsis-l2 mlr10 fs28 colf lh40">{{info.shop.address || ''}}</view>
						</view>
						<view class="tc">
							<image src="@/static/images/xilu_guide.png" mode="aspectFill" class="ico30"></image>
							<view class="fs24 col9 lh32 mt10">导航</view>
						</view>
					</view>
				</view>



				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">专业特长</view>
					<view style="color: #333;">
						<mp-html class="mb30" :content="info.talent"></mp-html>
					</view>
				</view>

				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">教学特色</view>
					<view style="color: #333;">
						<mp-html class="mb30" :content="info.trait"></mp-html>
					</view>
				</view>

				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">教育经历</view>
					<view style="color: #333;">
						<mp-html class="mb30" :content="info.teach"></mp-html>
					</view>
				</view>

				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">工作经历</view>
					<view style="color: #333;">
						<mp-html class="mb30" :content="info.work"></mp-html>
					</view>
				</view>

				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">资格证书</view>
					<view style="color: #333;">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :duration="500"
							@change="durationChange">
							<swiper-item class="scroll-view-item_H" v-for="item in info.xilufitness_urls.prove_images">
								<image :src="item" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
				</view>

				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">教学照片</view>
					<view style="color: #333;">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :duration="500"
							@change="durationChange">
							<swiper-item class="scroll-view-item_H" v-for="item in info.xilufitness_urls.teach_images">
								<image :src="item" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
				</view>


				<view class="xilu_boxs">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">教学视频</view>
					<view style="color: #333;">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="false" :duration="500"
							@change="durationChange">
							<swiper-item class="swiper_items"
								v-for="(item, index) in info.xilufitness_urls.teach_videos">

								<video :id="'video' + index" :src="item" @play="videoTrainPlay"
									:enable-progress-gesture="false"></video>

							</swiper-item>

						</swiper>

					</view>
				</view>

				<view class="xilu_scroll mt30">
					<view class="xilu_scroll_item col3" :class="course_type==1?'active':''"
						@click="chooseTab(1,info.id,info.shop.id)">团课
					</view>
					<!--<view class="xilu_scroll_item" :class="course_type==2?'active':''"
						@click="chooseTab(2,info.id,info.shop.id)">私教
					</view>
					<view class="xilu_scroll_item" :class="course_type==3?'active':''"
						@click="chooseTab(3,info.id,info.shop.id)">活动
					</view>-->
				</view>


				<view class=" pt10" v-if="course_type==1">
					<template v-if="course_list.length > 0">
						<course-list :courseList="{list: course_list}"></course-list>
					</template>

					<template v-else>
						<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
					</template>

				</view>


				<view class=" pt10" v-if="course_type==2">

					<template v-if="course_list.length > 0">

						<view class="xilu_list_item" v-for="(vo,keys) in course_list" @tap="course_detail(vo.id,2)">
							<image :src="vo.course.xilufitness_urls.thumb_image" mode="aspectFill"
								class="xilu_list_item_cover">
							</image>
							<view class="pt10 plr20">
								<view class="m-ellipsis fs30 fw500 col3 lh42">{{vo.course.title || ''}}</view>
								<view class="m-ellipsis mt10 fs24 col9 lh32"
									v-if="vo.course && vo.course.lable_list.length > 0">
									{{vo.course.lable_list.join('｜')}}
								</view>
								<view class="flex-box mt10">
									<view class="col2 fs24 flex-grow-1">{{vo.class_count || 0}}课时</view>
									<view class="m-ellipsis"><text
											class="col2 fs34 fw500 lh34 pr10">¥{{vo.course_price || 0}}</text><text
											class="tdl fs20 col9 lh34"
											v-if="vo.market_price > 0">¥{{vo.market_price || 0}}</text></view>
								</view>
							</view>
						</view>

					</template>

					<template v-else>
						<empty-data :tips="'暂无课程'" :lineHeight="100"></empty-data>
					</template>
				</view>

				<view v-if="course_type==3">
					<template v-if="course_list.length > 0">

						<view class="xilu_info_item flex-box" v-for="(vo,keys) in course_list"
							@tap="camp_detail(vo.id)">
							<image :src="vo.camp.xilufitness_urls.thumb_image" mode="aspectFill"
								class="xilu_info_item_cover">
							</image>
							<view class="flex-grow-1 pl10">
								<view class="fs30 col2 fw500 lh42">{{vo.start_at || ''}}-{{vo.end_at || ''}}</view>
								<view class="flex flex-align-end">
									<view class="flex-grow-1 m-ellipsis fs24 col3 lh34"
										v-if="vo.plans && vo.plans.length > 0">
										<template v-for="(vvv,kkk) in vo.plans">
											{{vvv.week || ''}}{{vvv.day_start_at || ''}}～{{vvv.day_end_at || ''}}
										</template>
									</view>
									<view class="xilu_btn">报名</view>
								</view>
								<view class="fs24 col3 lh34 mt15 m-ellipsis">
									<text>¥{{vo.camp_price || ''}}</text>
									<text class="col9 tdl fs20 ml5"
										v-if="vo.market_price > 0">¥{{vo.market_price || 0}}</text>
									<text class="xilu_textsq">{{vo.class_count || 0}}课时</text>
									<text class="xilu_textsq">{{vo.class_duration || ''}}分钟/课时</text>
								</view>
							</view>
						</view>

					</template>

					<template v-else>
						<empty-data :tips="'暂无活动'" :lineHeight="100"></empty-data>
					</template>

				</view>
				<view class="xilu_box" style="padding-bottom: 0;margin-top: 30rpx;">
					<view class="flex-box flex-between mb30">
						<view class="fs36 fw500 col3">用户评价</view>
						<view @click="commentList(shop_info.id || 0)" class="xilu_btn_more">更多评价</view>
					</view>

					<template v-if="comment_list.length > 0">
						<view class="xilu_pj_item" v-for="(vo,keys) in comment_list">
							<view class="flex-box">
								<image :src="vo.user.xilufitness_urls.avatar || '../../static/images/avatar.png'"
									mode="aspectFill" class="xilu_pj_item_head_img">
								</image>
								<view class="flex-grow-1 pl30">
									<view class="flex-box">
										<view class="flex-grow-1 m-ellipsis pr10 fs30 fw500 col3 lh30">
											{{vo.user.nickname || ''}}
										</view>
										<view class="fs24 col89 lh24">{{vo.createtime_txt || ''}}</view>
									</view>
									<view class="mt10 fs24 col2 lh36">
										<image src="@/static/images/xilu_star.png" mode="aspectFill"
											class="xilu_pj_item_star mr10"></image>{{vo.star || 0}}分
									</view>
								</view>
							</view>
							<view class="fs30 col9 lh44 mt10">{{vo.content || ''}}</view>
						</view>

					</template>

					<template v-else>
						<empty-data :tips="'暂无评论'" :lineHeight="100"></empty-data>
					</template>

				</view>


			</view>
		</view>
		<u-authorize @onAuthCancel="onAuthCancel($event)" @onAuthConfirm="onAuthConfirm($event)"
			:popupStatus="auth_status" :isAuth="2"></u-authorize>
	</view>
</template>

<script>
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	const app = getApp();
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				current: 0,
				course_type: 1,
				thumb_images: [],
				info: null,
				lable_list: [],
				shop_info: null,
				course_list: [],
				auth_status: false,
				comment_list: [],
				web_url: '',
				currentIndex: null
			}
		},
		methods: {
			durationChange(e) {
				if (this.currentIndex) {
					let videoContext = uni.createVideoContext(this.currentIndex)
					videoContext.pause()
					this.currentIndex = null
				}
			},
			videoTrainPlay(e) {
				console.log(e);
				let id = e.currentTarget.id

				if (!this.currentIndex) {
					this.currentIndex = id
					let videoContext = uni.createVideoContext(id)
					videoContext.play()
				} else {
					let videoContextPrev = uni.createVideoContext(this.currentIndex)
					if (this.currentIndex != id) {
						videoContextPrev.pause()
						this.currentIndex = id
					}

					let videoContext = uni.createVideoContext(id)
					videoContext.play()
				}
				console.log(e);

			},
			swiperTab(e) {
				this.current = Number(e.target.current)
				console.log(this.current);
			},
			//授权取消
			onAuthCancel(e) {
				this.auth_status = false;
				this.$api.toast('取消授权，可能会使部分服务不能用，或页面信息不完整')
			},
			//授权成功
			onAuthConfirm(e) {
				this.auth_status = false;
				this.collect((this.info.id || 0), (this.info.shop.id || 0));
			},
			//选择课程类型
			chooseTab(is_type, id, shop_id) {
				this.course_type = is_type;
				this.getCourseList(id, shop_id, is_type);
			},
			//教练详情
			getDetail(id, shop_id) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/coach/detail',
					data: {
						id: id,
						shop_id: shop_id
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.info = res.data.info;
						_this.thumb_images = res.data.info.xilufitness_urls.coach_images || [];
						_this.shop_info = res.data.info.shop || null;
						_this.lable_list = res.data.info.lable_list || [];
					}
				}).catch(error => {
					console.log('coachError', error);
				})
			},
			//获取课程数据
			getCourseList(id, shop_id, is_type) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/coach/getList',
					data: {
						id: id,
						shop_id: shop_id,
						is_type: is_type
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.course_list = res.data.list;
					}
				}).catch(error => {
					console.log('courseError', error);
				})
			},
			//获取评论
			getCommentList(shop_id) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/course/getCommentList',
					data: {
						shop_id: shop_id,
						page: 1
					},
					methods: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.comment_list = res.data.list || [];
					}
				}).catch(error => {
					console.log('commentError', error);
				});
			},
			//打开地图
			openLocation(lat, lng) {
				this.$api.openLocation(lat, lng);
			},
			//课程详情
			course_detail(id, is_type) {
				this.$api.navigate('../group_lessons_info/group_lessons_info?id=' + id + '&is_type=' + is_type)
			},
			//活动详情
			camp_detail(id) {
				this.$api.navigate('../bootcamp_info/bootcamp_info?id=' + id);
			},
			// 收藏
			collect(id, shop_id) {
				let _this = this;
				let token = this.$api.getCache('token');
				if (!token) {
					this.auth_status = true;
				} else {
					this.$http({
						url: '/addons/xilufitness/user/collect',
						data: {
							id: id,
							is_type: 2,
							shop_id: shop_id
						},
						method: 'post'
					}).then(res => {
						if (res.code == 1) {
							_this.info.is_collect = res.data.is_collect
						}
					}).catch(error => {
						console.log('coachError', error);
					})
				}
			},
			//更多评论
			commentList(shop_id) {
				this.$api.navigate('../user_appraise_list/user_appraise_list?shop_id=' + shop_id);
			},
		},
		onLoad(options) {
			this.web_url = webConfig.base_url || '';
			this.getCommentList(options.shop_id || 0);
			this.getDetail((options.id || 0), (options.shop_id || 0));
			this.getCourseList((options.id || 0), (options.shop_id || 0), this.course_type);
		},
		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	// .swiper_items {
	// 	width: 95% !important
	// }
	.avatar{
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.swiper {
		height: 450rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}


	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.xilu_boxs {
		background: #fff;
		border-radius: 20rpx;
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx;
	}

	.xilu_tips {
		display: inline-block;
		height: 39rpx;
		line-height: 39rpx;
		background: linear-gradient(90deg, #FFD26A 0%, #FFB94E 100%);
		border-radius: 19rpx;
		padding: 0 15rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		margin-left: 20rpx;
	}

	.xilu {
		&_swiper_info {
			width: 100%;
			height: 750rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&_mask {
			width: 100%;
			height: 380rpx;
			position: absolute;
			bottom: 0;
			z-index: 3;
			left: 0;
		}

		&_swiper_dot {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 20rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			right: 25rpx;
			bottom: 220rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			z-index: 4;
		}

		&_box {
			width: 700rpx;
			padding: 30rpx;
			margin-top: -190rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		&_label {
			width: 160rpx;
			height: 38rpx;
			border-radius: 50%
		}
		&_avatar {
			width: 160rpx;

		}
		&_bg_info {
			width: 700rpx;
			height: 140rpx;
			position: relative;
			z-index: 1;
		}

		&_bg_view {
			width: 700rpx;
			height: 140rpx;
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
		}

		&_scroll {
			&_item {
				display: inline-block;
				vertical-align: top;
				font-size: 34rpx;
				font-weight: 500;
				color: #999999;
				line-height: 48rpx;
			}

			&_item.active {
				font-weight: 500;
				color: #FFFFFF;
			}

			&_item+&_item {
				margin-left: 40rpx;
			}
		}

		&_list_item:nth-of-type(2n) {
			margin-right: 0;
		}

		&_list_item {
			width: 340rpx;
			padding-bottom: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;

			&_cover {
				width: 100%;
				height: 340rpx;
				display: block;
			}
		}

		&_btn_more {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			width: 146rpx;
			height: 55rpx;
			line-height: calc(55rpx - 2px);
			text-align: center;
			border-radius: 28rpx;
			border: 1px solid #979797;
		}

		&_pj_item {

			border-top: 1px solid #434343;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			&_head_img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			&_star {
				width: 23rpx;
				height: 21rpx;
			}
		}

		&_info_item {
			width: 700rpx;
			padding: 20rpx;
			background: #404243;
			border-radius: 20rpx;
			margin-top: 30rpx;

			&_cover {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				display: block;
			}
		}

		&_btn {
			width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #0E0E0F;
			background: #FFCF00;
			border-radius: 10rpx;
		}

		&_textsq::before {
			content: '|';
			display: inline-block;
			vertical-align: middle;
			font-size: 24rpx;
			color: #999999;
			margin: 0 5rpx;
		}
	}
</style>